<template>
<div>

<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>绩效管理</span>
	</div>
	<el-row>
	<el-form :inline="true" :model="form" >
		<!-- <el-form-item >
			<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
	    </el-form-item>

		<el-form-item >
		    <el-cascader 
				style="width:400px;"
				filterable
				:options="treedata"
				:props="props1"
				filterable
				change-on-select
				v-model="selectedOptions">
				</el-cascader>
		</el-form-item> -->

		<el-form-item >
		    <el-select v-model="form.type"  placeholder="企业类型">
		      <el-option label="县级" value="2"></el-option>
		      <el-option label="镇级" value="3"></el-option>
		      <el-option label="网格员" value="9"></el-option>
		    </el-select>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>
		
	</el-form>
	</el-row>

	<el-row>
		<el-card class="box-card">
			<v-chart :options="options" />
		</el-card>
	</el-row>


	<!-- <el-row :gutter="20">
		<el-col :span="12">
			<el-card class="box-card mt20">
				<v-chart :options="options1" />
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card class="box-card mt20">
				<v-chart :options="options2" />
			</el-card>
		</el-col>
		
	</el-row> -->


	<el-row class="mt10">
		<el-table
	    :data="list"
	    :header-cell-style="{
			'background-color': '#f4f4f5',
		    'color': '#616161',    
		}"
	    border
	    style="width: 100%">
	    	<el-table-column
		      type="index"
		      label="排名"
		      align="center"
		      width="50">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="行政区划"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="wgnum"
		      label="网格数"
		      align="center"
		      v-if="form.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="zsnum"
		      label="事件总数"
		      align="center"
		      v-if="form.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="dbnum"
		      label="待办结"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="ybnum"
		      label="已办结"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="bjl"
		      label="办结率"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="csnum"
		      label="超时数"
		      align="center"
		      class-name="red"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="csl"
		      label="超时率"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="sbnum"
		      label="上报人数"
		      align="center"
		      v-if="form.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="wgynum"
		      label="用户总数"
		      align="center"
		      v-if="form.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="sbl"
		      label="上报率"
		      align="center"
		      v-if="form.type != '9'"
		      >
		    </el-table-column>
	  	</el-table>
	</el-row>
</el-card>

</div>
</template>

<script>
import ECharts from 'vue-echarts'

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

export default {
	
	name : 'jixiao',
	
	data () {
		return {
		  	form : {
		  		type : '2',
		  	},

		  	list : [],

		  	options : {
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data: ['待办结', '已办结']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    yAxis:  {
			        type: 'value'
			    },
			    xAxis: {
			        type: 'category',
			        data: []
			    },
			    series: [
			        {
			            name: '待办结',
			            type: 'bar',
			            stack: '总量',
			            label: {
			                normal: {
			                    //show: true,
			                    //position: 'insideRight'
			                }
			            },
			            data: []
			        },
			        {
			            name: '已办结',
			            type: 'bar',
			            stack: '总量',
			            label: {
			                normal: {
			                    //show: true,
			                    //position: 'insideRight'
			                }
			            },
			            data: []
			        },
			    ]
			},
		}


	},

	props : {

	},

	components : {
		'v-chart': ECharts,
	},

	computed : {

	},

	methods : {
		init () {

			this.options.xAxis.data = [];
			this.options.series[0].data = [];
			this.options.series[1].data = [];

			this.$http({
				fun : 'jixiao',
				...this.form,
				cb : res => {
					console.log(res);
					this.list = res;

					let dbnum = [];
					let ybnum = [];

					res.forEach(item => {
						this.options.xAxis.data.push(item.name);
						this.options.series[0].data.push(item.dbnum);
						this.options.series[1].data.push(item.ybnum);
					})
				}
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.echarts {
  width: 100%;
}
</style>
